<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/jquery-confirm.min.css">

		<style>
			body {
				background: transparent;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				/*padding-top: 40px;*/
				padding-bottom: 50px;
				/*-webkit-perspective: 1200px;
				-moz-perspective: 1200px;
				-ms-perspective: 1200px;
				perspective: 1200px*/
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 80vw;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				/*height: 100vw;*/
			}
			
			.terminal-card {
				box-shadow: 2px 2px 20px #888888;
			}
			
			.terminal-card .mui-card-header {
				background-color: #007AFF;
				text-align: center;
				font-size: 6vw;
				height: 15vw;
				line-height: 10vw;
				color: white;
			}
			
			.speedchart {
				width: 80vw;
				height: 50vw;
			}
			
			.mui-table {
				text-align: center;
				border-top: solid;
				border-top-color: gainsboro;
				padding-top: 10px;
				line-height: 10vw;
			}
			
			.mui-table thead {
				color: gainsboro;
				font-size: medium;
			}
			
			.mui-table tbody {
				color: deepskyblue;
				font-size: large;
			}
			
			.mui-card-footer {
				display: block;
			}
			
			.cmdbutton {
				width: 27%;
				margin-left: 5%;
				margin-top: 5%;
			}
			
			.smallinfo {
				font-size: small;
				position: absolute;
				right: 10px;
				top: 8vw;
				float: right;
			}
			
			.mutil-cmd-div {
				text-align: center;
				font-size: large;
			}
			
			.mutil-cmd-div button {
				font-size: large;
				width: 80%;
			}
			
			#addnewterminal {
				width: 80%;
				position: absolute;
				bottom: 20px;
				left: 10%;
				font-size: x-large;
			}
			
			.mui-card {
				/*width: 80%;
				left: 10%;*/
				box-shadow: 0px 0px 0px #333333;
				border: 0px;
			}
			
			.mui-card-footer:before,
			.mui-card-header:after {
				background-color: white;
			}
			
			.mui-card-header {}
			
			.mui-card-header>img:first-child {
				width: 50%;
				height: auto;
				margin-left: 25%;
				margin-top: 20px;
			}
			
			.terminalNameSpan {
				text-align: center;
				color: white !important;
				font-size: large;
			}
			
			.mui-input-row {
				border-color: #9966ff;
				border: 1px solid #9966FF;
				border-radius: 10px;
				width: 80%;
				left: 10%;
				margin-top: 15px;
			}
			
			.mui-input-row label~input {
				width: 55%;
			}
			
			.mui-input-row label {
				background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#9933cc), to(#6699ff));
				color: white;
				width: 45%;
				font-size: large;
			}
			
			.mui-icon-help {
				color: orange;
				position: absolute;
				font-size: xx-large;
				right: 10%;
				top: 20%;
				/*bottom: 0px;*/
			}
			
			.mui-input-row.mui-input-range {
				overflow: visible;
				padding-right: 0px;
			}
		</style>

	</head>

	<body>
		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header">
				<img src="../images/wifi.png">
				<span class="mui-icon mui-icon-help"></span>
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>路由器名称</label>
						<input type="text" class="mui-input-clear" placeholder="wifi sid">
					</div>
					<div class="mui-input-row">
						<label>路由器密码</label>
						<input type="text" class="mui-input-clear" placeholder="wifi password">
					</div>
					<div class="mui-input-row mui-input-range">
						<label>任务数</label>
						<input id="numbersoftasktext" type="text" class="mui-input-clear" placeholder="1~5" value="1">
						<input id="numbersoftask" type="range" min="1" max="5" value="1">
					</div>
					<div class="mui-input-row">
						<label>设备名称</label>
						<input type="text" class="mui-input-clear" placeholder="name">
					</div>
					<div class="mui-input-row">
						<label>设备SN</label>
						<input type="text" class="mui-input-clear" placeholder="the sn">
					</div>

				</form>
			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<!--<div class="mui-card-footer">
				
				
			</div>-->
		</div>
		<button type="button" class="mui-btn mui-btn-primary " id="addnewterminal">开始配置</button>

		<div id="readme" style="display: none;">

			<h3>使用说明：</h3>
			<ol>
				<li>确保手机连入wifi</li>
				<li>按住设备上的</li>
				<li>按住控制器“+”键后接通控制器电源，至通信收发指示快速闪烁后松开。</li>
				<li>点击“开始配置”按钮。等待配置成功。</li>

			</ol>
			<p> 配置时间长短根据WIFI信号的强弱和启动配置的时机，会有不同，如配置失败，重新在APP中点“开始配置”按钮。</p>
			<h4>指示灯状态</h4>
			<p>

				WIFI连接成功，WIFI连接指示灯亮，否则灭。</p>
			<p>云服务连接成功，云端连接指示灯亮，否则灭。</p>
			<p>WIFI有数据收发时，通信收发指示灯闪烁。</p>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script src="../js/jquery-confirm.min.js"></script>
		<script src="../js/dateformat.js"></script>
		<script type="text/javascript">
			function initList() {
				app.getServerConfig(function(serverconfig) {
					app.getTerminal("", function(terminals) {
						var terminaldiv = jQuery("#terminaldiv").empty();

						jQuery.each(terminals, function(index, data) {
							console.log(data);
							var template = jQuery("#terminal-template").clone();
							template.attr("id", "terminaldiv_" + data.id);
							template.data("id", data.id);
							template.show();

							template.find(".terminalNameSpan").html(data.terminalName);

							template.find(".terminalName").val(data.terminalName);
							template.find(".terminalSn").val(data.sn);
							template.find(".terminalCname").val(data.socketServerConfig.configName);
							template.find(".terminalTime").val(new Date(data.addTime).toString());

							terminaldiv.append(template);

						});
					});
				});
			}

			function changeCallBack() {
				app.freshTerminal();
				initList();
			}

			function initPage() {
				initList();

				jQuery(document).on("click", ".btn-terminal", function(e) {
					//console.log(e);
					var button = jQuery(e.target);
					var li = button.parents("li");
					var id = li.data("id");
					var name = li.find(".terminalName").val();
					var sn = li.find(".terminalSn").val();
					if(button.hasClass("btn-update")) {
						app.updateTerminal(id, name, sn, changeCallBack);
					} else {
						app.delTerminal(id, changeCallBack);
					}
					console.log(id);
					console.log(name);
				});

				jQuery(".mui-icon-help").click(function() {
					jQuery.alert({
						title: '使用说明!',
						content: jQuery("#readme").html(),
						theme: 'supervan'
					});
				});
				
				jQuery("#numbersoftask").change(function(){
					jQuery("#numbersoftasktext").val(this.value);
				})

				jQuery("#addnewterminal").click(function() {
					mui.toast('施工中', {
						duration: 'long',
						type: 'div'
					})
				});
			}

			jQuery(document).ready(initPage);
		</script>
	</body>

</html>